<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>居中</title>
<link rel="stylesheet" href="../CSS/center.css">

<body>
  <nav style="display: grid;align-items: center;">
    <button class="btn1">定位+transform</button>
    <button class="btn2">定位+margin</button>
    <button class="btn3">grid</button>
    <button class="btn4">flex</button>
  </nav>
  <main class="father1">
    <div class="son1">
      内容
    </div>
  </main>

  <table>
    <tr>
      <td>
        <div class="box"></div>
      </td>
    </tr>
  </table>
</body>
<script>
  const buttons = document.querySelectorAll("button");
  const main = document.querySelector("main");
  const div = document.querySelector("div");

  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      const className = button.classList[0];
      console.log(button.classList[0]);
      switch (className) {
        case "btn1":
          main.className = "father1 animated"; // 添加animated类名
          div.className = "son1 animated"; // 添加animated类名
          setTimeout(() => {
            main.classList.remove("animated"); // 删除animated类名
            div.classList.remove("animated"); // 删除animated类名
          }, 500); // 延迟500毫秒执行
          break;
        case "btn2":
          main.className = "father2 animated"; // 添加animated类名
          div.className = "son2 animated"; // 添加animated类名
          setTimeout(() => {
            main.classList.remove("animated"); // 删除animated类名
            div.classList.remove("animated"); // 删除animated类名
          }, 500); // 延迟500毫秒执行
          break;
        case "btn3":
          main.className = "father3 animated"; // 添加animated类名
          div.className = "son3 animated"; // 添加animated类名
          setTimeout(() => {
            main.classList.remove("animated"); // 删除animated类名
            div.classList.remove("animated"); // 删除animated类名
          }, 500); // 延迟500毫秒执行
          break;
        case "btn4":
          main.className = "father4 animated"; // 添加animated类名
          div.className = "son4 animated"; // 添加animated类名
          setTimeout(() => {
            main.classList.remove("animated"); // 删除animated类名
            div.classList.remove("animated"); // 删除animated类名
          }, 500); // 延迟500毫秒执行
          break;
        default:
          break;
      }
    });
  });

  // 自动触发按钮点击事件向下执行
  let currentIndex = 0;
  const interval = setInterval(() => {
    buttons[currentIndex].click(); // 模拟点击按钮
    currentIndex = (currentIndex + 1) % buttons.length; // 更新当前按钮索引
  }, 2000); // 设置时间间隔为2秒

  // 停止自动执行按钮点击事件
  const stopAutoplay = () => {
    clearInterval(interval); // 清除定时器
  };

  // 监听页面失去焦点事件，停止自动执行按钮点击事件
  window.addEventListener("blur", stopAutoplay);
</script>
</html>